<template>
	<view class="page">
		<template v-if="isShow">
			<view class="rotation">
				<view class="dongtu dongtuBg"></view>
				<view class="dongtu-data">{{cunt}}%</view>
				<view class="rotation-data1">流量监测</view>
			</view>
		</template>
		<template v-if="!isShow">
			<view class="diagonsis-contetn">
				<view class="result-h">
					<view class="jce">
						<image src="../../static/images/icon14.png" alt="" />
						<view class="jce-num">有<text>{{total}}</text>项异常！</view>
						<view class="result">检测结果</view>
					</view>
					<view class="el-tbn">
						<view class="el-btn" @click="weight">重新诊断</view>
					</view>
				</view>
				<view class="el-flex-content">
					<view class="el-flex-items" v-for="(item,index) in dataList" :key="index">
						<view class="itmetop">
							<view class="img1"><image :src="require(`../../static/img/${item.icon}`)" alt=""></view>
							<view class="text">{{ item.name }}</view>
							<view class="img2">
								<image src="../../static/images/icon15.png" alt="" v-if="item.state === 0">
								<image src="../../static/images/icon16.png" alt="" v-if="item.state === 1">
							</view>
							<view class="text2">{{ item.remark }}</view>
							<view class="text3" @click="changeFalg(item,index)">
								<text>
									{{!item.falg?'展开':"收起"}}
								</text>
								<!-- <van-icon :name="!item.falg ? 'arrow-down' : 'arrow-up'" /> -->
								<uni-icons  :type="!item.falg ? 'bottom' : 'top'" size="20"></uni-icons>
							</view>
						</view>
						<view class="jianceShow" v-if="item.falg">
							<view class="text4">{{ item.remarkInfo }}</view>
							<view class="el-btn1" @click="pageChange(item)" v-if="item.state === 0">{{ item.btnName }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
	import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/icons.js'
	export default {
		data() {
			return {
				iccid:uni.getStorageSync("userInfo").iccid,
				isShow: true,
				cunt: 0,
				total: 0,
				timer: null,
				simInfo: {},
				dataList: [],
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.timer = setInterval(() => {
					if (this.cunt > 99) {
						this.isShow = false
						this.timer = null;
						clearInterval(this.timer);
					} else {
						this.cunt++
					}
				}, 100);
				this.dataList = []
				this.$api.oneButton({iccid:uni.getStorageSync('iccid') || ''}).then((res) => {
					if (res.code === "200") {
						res.data.accountMap.name = '账户余额'
						res.data.accountMap.btnName = '充值余额'
						res.data.accountMap.icon = 'icon_yejc.png'
						res.data.accountMap.falg = false

						res.data.authStateMap.name = '实名状态'
						res.data.authStateMap.btnName = '去实名'
						res.data.authStateMap.icon = 'icon_smzt.png'
						res.data.authStateMap.falg = false

						res.data.dataMap.name='流量检测'
						res.data.dataMap.btnName='前往订购'
						res.data.dataMap.icon='17.png'

						// res.data.pkgNextMap.name = '套餐到期'
						// res.data.pkgNextMap.btnName = '前往订购'
						// res.data.pkgNextMap.icon = 'icon_lljc.png'


						res.data.huoDongMap.name='活动检测'
						res.data.huoDongMap.btnName='活动详情'
						res.data.huoDongMap.icon='21.png'

						res.data.pkgMap.name = '在用套餐'
						res.data.pkgMap.btnName = '前往订购'
						res.data.pkgMap.icon = 'icon_tc.png'

						res.data.simStateMap.name = '卡号状态'
						res.data.simStateMap.btnName = '前往订购'
						res.data.simStateMap.icon = 'icon_kztjc.png'
						this.dataList = [res.data.accountMap, res.data.authStateMap, res.data.dataMap, res.data.huoDongMap, res.data.pkgMap, res.data.simStateMap]
						this.dataList = this.dataList.sort((a, b) => {
							return a.state - b.state
						})
						this.total = this.dataList.filter(v => v.state === 0).length
						clearInterval(this.timer);
						this.isShow = false
					} else {
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			changeFalg(data, index) {
				this.$set(this.dataList[index], 'falg', !data.falg)
				this.$forceUpdate()
			},
			pageChange(data) {
				if (data.name === '在用套餐' || data.name === '流量检测' || data.name === '账期检测') {
					uni.navigateTo({
						url:'/pages/trafficPacket/index'
					})
				} else if (data.name === '实名状态') {
					this.shiming();
				} else if (data.name === '余额检测'||data.name === '账户余额') {
					uni.navigateTo({
						url:'/pages/yue/index'
					})
				} else if(data.name === '活动检测'){
					uni.navigateTo({
						url:'/pages/coupon/huodongIndex'
					})
				}
			},
			weight() {
				this.isShow = true
				this.init()
			},
			shiming(){
				this.$api.authUrl({iccid:uni.getStorageSync('iccid') || '', supplierCode:uni.getStorageSync('supplierCode') || ''}).then(res=>{
					// code=409 表示是联调，需要跳转联通小程序实名。
					// code=408 表示是电信，直接跳转 data里面的链接
					// code=407 表示是移动,直接跳转data里面链接。
					if(res.code === '407' || res.code === '408' ){
						//#ifdef H5
						window.location.href = res.data
						//#endif
						//#ifdef APP-PLUS
						plus.runtime.openURL(res.data)
						//#endif
					}else if(res.code === '409'){
						
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})	
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	view {
		display: flex;
		flex-grow: 0;
		flex-basis: auto;
		align-items: stretch;
		flex-direction: column;
	}

	.page {
		height: 100%;
		background: #f7f8fa;

		.rotation {
			height: 100%;
			position: relative;
			background: url('../../static/images/icon21.png') no-repeat top center;
			background-size: 100% 100%;
			.dongtuBg {
				background: url('../../static/images/icon20.png') no-repeat center;
				background-size: 100%;
				width: 240px;
				top: 124px;
				// bottom:0;
				left: 0;
				right: 0;
				margin: 0 auto;
				position: absolute;
				height: 240px;
			}

			.dongtu-data,
			.rotation-data1 {
				top: 136px;
				// bottom:0;
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 100px;
				position: absolute;
				height: 225px;
				line-height: 225px;
				margin: auto;
				text-align: center;
				font-size: 16px;
				font-weight: 800;
				color: #fff
			}

			.rotation-data1 {
				top: 260px;
			}

			@-webkit-keyframes rotation-data {
				from {
					-webkit-transform: rotate(0deg)
				}

				to {
					-webkit-transform: rotate(1turn)
				}
			}

			.dongtu {
				-webkit-transform: rotate(1turn);
				animation: rotation-data 3s linear infinite;
				-moz-animation: rotation-data 3s linear infinite;
				-webkit-animation: rotation-data 3s linear infinite;
				-o-animation: rotation-data 3s linear infinite
			}
		}

		.diagonsis-contetn {
			height: 100%;
			align-items: center;
			.result-h {
				background: url('../../static/images/icon18.png') no-repeat center top;
				background-size: 100%;
				z-index: 9;
				height: 220px;
				width: 100%;

				.jce {
					background: url('../../static/images/icon8.png') no-repeat center;
					width: 138px;
					height: 138px;
					background-size: 100%;
					align-self: center;
					align-items: center;
					margin-top: 20px;

					image {
						margin-top: 30px;
						width: 25px;
						height: 22px;
					}

					.jce-num {
						margin-top: 8px;
						flex-direction: row;
						font-size: 19px;
						font-weight: 700;
						color: #fff;
						margin-left: 14px;

						text {
							font-size: 19px;
							color: #ff0;
						}
					}

					.result {
						font-size: 13px;
						font-weight: 400;
						color: #fff;
						margin-top: 10px;
					}
				}

				.el-tbn {
					height:60px;
					background-size: 100%;
					display: flex;
					flex-direction: column-reverse;
					align-items: center;
					position: absolute;
					width: 80%;
					margin: 0 auto;
					left: 0;
					right: 0;
					bottom: 0px;

					.el-btn {
						width: 100%;
						height: 45px;
						line-height: 45px;
						text-align: center;
						background: linear-gradient(90deg, #50A9FF 0%, #1772FF 100%);
						font-weight: 700;
						color: #fff;
						font-size: 18px;
						margin-bottom: 15px;
						border-radius: 200px;
					}
				}
			}

			.el-flex-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 95%;
				height: calc(100% - 270px);
				margin-top: -40px;
				position: relative;
				z-index: 10;
				overflow: auto;

				.el-flex-items {
					background: #fff;
					padding: 12px 8px;
					margin-bottom: 10px;
					border-radius: 7px;
					width: 93%;

					.itmetop {
						flex-direction: row;
						align-items: center;

						.img1 image{
							width: 24px;
							height: 24px;
						}

						.text {
							font-size: 16px;
							font-weight: 400;
							color: #06121e;
							margin-left: 2px;
							margin-right: 35px;
						}

						.img2 image {
							width: 14px;
							height: 14px;
						}

						.text2 {
							font-size: 13px;
							font-weight: 400;
							color: #bdc4ce;
							margin-left: 4px;
							flex: 1;
						}

						.text3 {
							flex-direction: row;

							text {
								margin-right: 10px;
								font-size: 15px;
								font-weight: 400;
								color: #8c9198;
							}
						}
					}
				}

				.jianceShow {
					border-top: 1px solid #f7f8fa;
					flex-direction: row;
					align-items: center;
					margin-top: 10px;
					padding: 10px 0 0;

					.text4 {
						font-size: 14px;
						font-weight: 400;
						color: #bdc4ce;
						flex: 1;
					}

					.el-btn1 {
						padding: 6px 8px;
						background: #1c96f6;
						color: #fff;
						border-radius: 7px;
					}
				}

			}
		}

		.footer {
			padding: 15px;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			background: rgb(247, 248, 250);

			.t {
				font-size: 13px;
				font-weight: 400;
				color: #06121e;
			}

			.link {
				font-size: 13px;
				font-weight: 400;
				color: #1c96f6;
				text-decoration: underline;
				margin-left: 5px;
			}
		}
	}
</style>